<script setup>
import {ref} from 'vue'
import DatabaseUp from "./UpPart/DatabaseUp.vue";
import DatabaseDown from "./DownPart/DatabaseDown.vue";

// 对话框
const openDatabaseDialog = ref(false);
// 调整对话框的margin-top
const customTop = ref('1vh');
</script>

<!--Database Viewer主题内容-->
<!--包含上下两部分组件：
DatabaseUp（保存在UpPart目录下）、DatabaseDown（保存在DownPart目录下）-->
<template>
  <div id="dataViewer">
    <el-button @click="openDatabaseDialog = true">
      Data
    </el-button>

    <el-dialog v-model="openDatabaseDialog"
               title="Database Viewer"
               width="80%"
               draggable
               :top="customTop">

      <!--      主体内容-->
      <!--      上半部分-->
      <DatabaseUp/>

      <!--      下半部分-->
      <DatabaseDown/>
    </el-dialog>

  </div>
</template>

<style scoped>
#dataViewer{
  height: 100%;
}
.el-dialog {
  background-color: #3c3f41;
}

.el-dialog span {
  color: white;
}

</style>
